<!--
 * @description: 书籍详情页面
 * @fileName: index.vue
 * @author: panlua
 * @date: 2019-07-02 14:27:39
 * @version: V1.0.0
!-->
<template>
  <div class="book-info-content"
    v-loading="loading"
    element-loading-text="加载书籍信息中......"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0)">
    <el-button type="text" @click="goBack">
      <span class="bookIcon book-icon-fanhuishouye"></span>
    </el-button>
    <div class="info-header">
      <div class="header-left">
        <img :src="imgPath(bookInfo.cover)" alt="" class="book-cover">
      </div>
      <div class="header-right">
        <h1 class="title">{{bookInfo.title}}</h1>
        <p class="tags">
          <i v-for="(item, index) in bookInfo.tags" :key="index" :style="tagBg()">{{item}}</i>
        </p>
        <p class="sup">
          <span class="author">{{bookInfo.author}}</span>
          <span class="line">|</span>
          <span>{{bookInfo.minorCate}}</span>
          <span class="line">|</span>
          <span class="word-number">{{bookInfo.wordCount}}</span>
        </p>
        <p class="sup">{{bookInfo.updated | updatedFilter}}更新</p>
        <el-button type="primary" @click="readClick(0)">开始阅读</el-button>
      </div>
    </div>
    <div class="book-data">
      <div>
        <i class="key">追书人数</i>
        <i class="value">{{bookInfo.latelyFollower}}</i>
      </div>
      <div>
        <i class="key">读者留存率</i>
        <i class="value">{{bookInfo.retentionRatio}}%</i>
      </div>
      <div>
        <i class="key">日更新字数</i>
        <i class="value">{{bookInfo.serializeWordCount}}</i>
      </div>
    </div>
    <div class="book-section">
      <h3 class="title">《{{bookInfo.title}}》简介：</h3>
      <p class="content" v-html="lineFeedFilter(bookInfo.longIntro)"></p>
    </div>
    <div class="book-section">
      <h3 class="title">《{{bookInfo.title}}》目录：
        <span :class="order ? 'bookIcon book-icon-biaotou-zhengxu' : 'bookIcon book-icon-biaotou-daoxu'" @click="orderClick"></span>
      </h3>
      <ul class="chapter-list">
        <li v-for="(item, index) in chapterData" :key="index" @click="readClick(index)">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {api} from './api'
import {Dates} from 'utils'

export default {
  filters: {
    updatedFilter (el) {
      if (el) {
        return Dates.moment(el).startOf('day').fromNow()
      } else {
        return ''
      }
    }
  },
  data () {
    return {
      bookInfo: {},
      chapterData: [],
      loading: false,
      order: true // true：正序 false：倒序
    }
  },
  mounted () {
    let id = this.$route.query.id
    this.loading = true
    Promise.all([this.getBookInfo(id), this.getBookChapter(id)]).then(res => {
      this.loading = false
    })
  },
  methods: {
    lineFeedFilter (el) {
      if (el) {
        return el.replace(/\n/g, '<br/><br/>')
      } else {
        return ''
      }
    },
    /*
     *@name: 获取小说详情信息
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-06 15:29:52
    */
    getBookInfo (id) {
      return new Promise(reslove => {
        this.$fetch(api.bookDetail, {id: id}).then(res => {
          if (res.ok) {
            this.bookInfo = res.infoData
          } else {
            this.$message.error(res.msgContent)
          }
          reslove()
        })
      })
    },
    /*
     *@name: 获取小说章节
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-06 15:30:07
    */
    getBookChapter (id) {
      return new Promise(reslove => {
        this.$fetch(api.bookChapter, {id: id}).then(res => {
          if (res.ok) {
            this.chapterData = res.chapterData
          } else {
            this.$message.error(res.msgContent)
          }
          reslove()
        })
      })
    },
    orderClick () {
      this.order = !this.order
      this.chapterData = this.chapterData.reverse()
    },
    goBack () {
      this.$router.push({path: '/'})
    },
    imgPath (cover) {
      if (!cover) {
        return
      }
      return 'http://statics.zhuishushenqi.com' + cover
    },
    tagBg () {
      const bgs = ['#86bfec', '#f5b572', '#86d196', '#f18c8c', '#b9a7cc', '#86bfec', '#f5b572']
      return {
        backgroundColor: bgs[Math.floor((Math.random() * bgs.length))]
      }
    },
    readClick (index) {
      this.$router.push({
        path: '/bookRead',
        query: {
          bookId: this.$route.query.id,
          bookTitle: this.bookInfo.title,
          chapterIndex: index
        }
      })
    }
  }
}
</script>

<style lang="scss">
.book-info-content {
  width: 1000px;
  margin: 50px auto;
  border: 1px solid #f5d3c6;
  min-height: 800px;
  padding: 50px;
  .info-header {
    display: flex;
    flex-direction: row;
    .header-left {
      width: 200px;
      .book-cover {
        width: 150px;
        height: 200px;
        box-shadow: 0 4px 5px #bbb;
      }
    }
    .header-right {
      flex: 1;
      .title {
        line-height: 25px;
        font-size: 20px;
        color: #666;
      }
      .tags {
        padding: 10px 0 0;
        i {
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          margin-right: 10px;
          color: #fff;
          font-style: normal;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .sup {
        color: #999;
        font-size: 12px;
        padding: 6px 0;
        .line {
          padding: 0 10px;
        }
        .author {
          color: #d82626;
        }
      }
    }
  }
  .book-data {
    display: flex;
    flex-direction: row;
    padding: 40px 0 30px;
    &>div {
      flex: 1;
      i {
        text-align: center;
      }
      .key {
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
        font-size: 14px;
        font-style: normal;
      }
      .value {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        color: #d82626;
      }
    }
  }
  .book-section {
    margin-bottom: 40px;
    .title {
      padding-left: 5px;
      border-left: 3px solid #cab389;
      font-size: 16px;
      color: #666;
      .bookIcon {
        float: right;
        font-size: 30px;
        cursor: pointer;
      }
    }
    .content {
      position: relative;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      padding: 20px 40px;
    }
    .chapter-list {
      overflow: hidden;
      width: 100%;
      margin: 20px 0;
      &::before {
        content: "";
        display: table;
      }
      li {
        width: 33.33333333333%;
        float: left;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        border-bottom: 1px solid #eee;
        overflow: hidden;
        color: #666;
        cursor: pointer;
        &:hover {
          color: #d82626;
        }
      }
    }
  }
}
</style>
